<template>
    <div class="Buy">
       
            <div class="select-header">
                <ul class="select-list">
                    <template v-if="!price.img">
                    <li class="select-listHeader">
                        请核对查询车辆信息
                    </li>
                    <li class="select-listHeader_img borBttom" style="display: flex;justify-content: space-between">
                        <div class="float_lf" style="width: 129px;display: flex;align-items: center;">
                            <img  style="width: 50px;height: 50px; margin: 0 auto; border-radius: 50%; border:1px solid #cccccc;" :src=price.brand_img onerror="javascript:this.src='../assets/images/daiti.png'" width="100%" height="100%" alt=""/>
                        </div>
                        <div style="width: 100%;border: 0px;display: flex;flex-flow: column nowrap;padding: 0;">
                            <p class="car-number" style="width: auto">
                                {{price.vin}}
                            </p>
                            <p style=" height: 1px;border-top: 1px solid #e5e5e5; width:100%;margin: 0px"></p>
                            <p class="car-name ">
                                {{price.brand_text}}
                            </p>
                        </div>
                    </li>
                        <li class="select-cost borBttom" >
                            查询费用 <span style="color: #666;margin-left: 15px">{{price.brand_price}}元</span>

                        </li>
                        <li class="select-time borBttom" >
                            预计时间  <span style="color: #d32920;margin-left: 15px">{{price.expect_time}}</span>
                        </li>
                    </template>
                    <template v-else="price.img">
                    <li class="select-listHeader" style=" padding:10px; ">
                        <img style=" border-radius: 3px; height: 200px; width: 100% "  :src=price.img onerror="javascript:this.src='../assets/images/daiti.png'" alt=""/>
                    </li>

                    <li class=" select-cost borBttom" style="margin: 0 10px;padding-left: 10px;">
                        车辆品牌 <span style="color: #666;" >{{price.brand_text}}</span>
                    </li>
                    <li class="select-cost borBttom" style="margin: 0 10px;padding-left: 10px;">
                        查询费用 <span style="color: #666;">{{price.brand_price}}元</span>
                    </li>
                    <li class="select-time borBttom " style="margin: 0 10px;padding-left: 10px;">
                        预计时间 <span style="color: #d32920;">{{price.expect_time}}</span>
                    </li>
                    </template>
                </ul>
            </div>
            <div class="protocol" style="line-height: 35px;height: 35px">
                <label>
                    <input id="check" style="display: none" type="checkbox" v-model="xieyi"  checked="checked"/>
                    <div class="check_box">

                    </div>
                    <!--<input id="check" style="display: none" type="checkbox"  checked="checked"/>-->
                    同意
                    《<a style=" text-decoration: underline;" href="https://api.mayinvwang.com/webview/deals/">蚂蚁女王服务协议 </a>》
                </label>
            </div>
            <div class="btn-find" style="margin: 0;margin-top: 65px;padding: 0 20px; width: 100%;">
                <button id="bayBtn"  @click="Clickbuy_btn()" style="width: 100%">
                    确认购买
                </button>
            </div>
    </div>
</template>

<script>
    import $ from 'jquery';
    export default {
        name: 'Buy',
        data() {
            return {
                price:{},
                weixinzhifu:{},
                xieyi:true,
                token:"",
                user_id:'',
            }
        },
        methods:{
            //将图片转成2进制
            dataURItoBlob(dataURL) {
                var byteString = atob(dataURL.split(',')[1]);
                var mimeString = dataURL.split(',')[0].split(':')[1].split(';')[0];
                var ab = new ArrayBuffer(byteString.length);
                var ia = new Uint8Array(ab);
                for (var i = 0; i < byteString.length; i++) {
                    ia[i] = byteString.charCodeAt(i);
                }
                return new Blob([ab], {type: mimeString});
            },
            //点击页面并购没
            Clickbuy_btn(){
              if(!this.xieyi){
//                  console.log('你没有选着协议');
                  return this.$layer.msg("请阅读并同意协议")
              }else{
                  console.log(this.price)
                  this.opebID();
//                  this.buy()
              }
            },
            //购买页面
            buy(){
                let _this=this;
                if(this.price.img){//有图片
                    alert('上传图片查询');

                    let blob=this.dataURItoBlob(sessionStorage['dataURL']);
                    let form=new FormData();
                    form.append('file',blob);
                    form.append('user_id',_this.user_id);
                    form.append('brand_id',_this.price.brand_id);
                    form.append('is_text',0);
                    form.append('out_trade_no', _this.weixinzhifu.out_trade_no);
                    form.append('nonceStr', _this.weixinzhifu.nonceStr);
                    form.append('paySign', _this.weixinzhifu.paySign);
                    form.append('token', _this.token);
                    form.append('price', _this.price.brand_price);

//                    this.$http.post('https://api.mayinvwang.com/Wechat/query_wechat',
//                        JSON.stringify(form)
//                    ).then(
//                        (res)=>{
//                            console.log(res.data)
//                            if(res.data.status='1'){
////                                this.returenMarry();
////                                this.$router.push({name:'report'})
//                            }else{
//                                this.returenMarry();
//                            }
//                        },
//                        ()=>{
//                            alert("网络错误了请重试！");
//                        }
//
//                    )
                    $.ajax({
                        //url:"http://api.mayinvwang.com/index.php/appjson/query_wechat11",
                        url:"https://api.mayinvwang.com/Wechat/query_wechat",
                        type:"post",
                        data:form,
                        dataType:"json",
                        processData:false,
                        contentType:false,
                        success:function(data){
                            console.log(data);
                            if(data.status=="1") {
                               _this.$layer.msg("支付成功");
                                _this.$router.push({name:'report'})
                            }else{
                                _this.returenMarry();

                            }
                        },
                        error:function(){
//                            "use strict";
//                            layer.closeAll('loading');
//                            console.log("错误了");
                            alert("网络错误请重试");
                        }
                    });
                }else{//vin 查询时
                    alert('vin 码查询');
                        let that=this;
                    console.log(sessionStorage['token']);
                    console.log(sessionStorage['user_id']);
                    $.ajax({
                        type:'post',
                        url:'https://api.mayinvwang.com/Wechat/query_wechat',
                        data:{
                            token:that.token,
                            user_id:that.user_id,
                            paySign:that.weixinzhifu.paySign,
                            nonceStr:that.weixinzhifu.nonceStr,
                            out_trade_no:that.weixinzhifu.out_trade_no,
                            is_text:0,
                            is_partner:2,
//                        remark:beizhu,
                            vin:that.price.vin,
                            brand_id:that.price.brand_id,
//                            engine_num:engine_num,
                            price:that.price.brand_price
                        },
                        dataType:'json',
                        success:function (data) {
                            console.log(data);
                            if(data.status='1'){

//                                this.returenMarry();
                                that.$router.push({name:'report'})
                            }else{
                                that.returenMarry();
                            }
                        },
                        error:function(){
                            alert("网络错误了请重试！");
                        }
                    });
                    /**
                     *

                    this.$http.post('https://api.mayinvwang.com/Wechat/query_wechat',
                        {
                         token:this.token,
                         user_id:this.user_id,
                         paySign:this.weixinzhifu.paySign,
                         nonceStr:this.weixinzhifu.nonceStr,
                         out_trade_on:this.weixinzhifu.out_trade_no,
                         is_text:0,
                         is_partner:2,
                         vin:this.price.vin,
                         brand_id:this.price.brand_id,
                         price:this.price.brand_price
                        }).then(
                        (res)=>{
                            console.log(res.data)
                            if(res.data.status='1'){
//                                this.returenMarry();
                                this.$router.push({name:'report'})
                            }else{
                                this.returenMarry();
                            }
                        },
                        ()=>{
                            alert("网络错误了请重试！");
                        }
                    )*/
                }
            } ,
            //退款接口
            returenMarry(){
                this.$http.post('http://guanli.mayinvwang.com/wxkf/tools/example/refund.php',
                    {
                        out_trade_on:this.weixinzhifu.out_trade_no,
                        total_fee:this.price.brand_price
                    }).then(
                    (res)=>{
                        console.log(res.data);
                        this.$layer.msg('查询失败，正在退款！')
                    },()=>{
                        this.$layer.msg('网络错误了请重试！')
                    })
            },
            opebID(){
                this.$http.post("jsapi.php",
                    {
                        openId:sessionStorage['openId'],
                        jiage:this.price.brand_price
                    }).then(
                    (res)=>{
                        this.weixinzhifu=res.data;
                        this.callpay()
                    }
                )
            },
            callpay(){
                let  _this=this;
                WeixinJSBridge.invoke('getBrandWCPayRequest',this.weixinzhifu,
                function (res) {
                    WeixinJSBridge.log(res.err_msg);
                    if(res.err_msg == "get_brand_wcpay_request:ok"){
                        //alert("微信支付成功，将返回到主页!");
                        _this.buy();
                    }else if(res.err_msg == "get_brand_wcpay_request:cancel"){
                        alert("用户取消支付!");
                    }else{
                        alert("支付失败!");
//                        _this.buy();
                    }
                })
            }
        },
        created(){
           this.user_id=this.$store.state.user_id||sessionStorage.getItem('user_id');
           this.token=this.$store.state.user_id||sessionStorage.getItem('token');
            console.log(this.$route.params.brand_price);
            if(this.$route.params.brand_price){
                sessionStorage['price']= JSON.stringify(this.$route.params);
            }

            this.price=JSON.parse(sessionStorage['price']);
            console.log(this.price)

        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

    @import "../assets/css/mynw.css";
    @import "../assets/css/select.css";
    .select-listHeader {
        /* height: 45px; */
        line-height: 35px;
        padding-top: 10px;
        font-size: 0.9375rem;
    }
    .check_box{
        width:0.9375rem;
        height:0.9375rem;
        vertical-align: middle;
        display: inline-block;
        position: relative;
    }
    .check_box:before{
        width: 0.9375rem;
        display: inline-block;
        height: 0.9375rem;
        content: '';
        background:  url(../assets/images/payment_selected_normal@2x.png) no-repeat;
        background-size: cover;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -0.468rem;
        margin-top: -0.59rem;
        /*transform: translate(-50%, -50%);*/

    }
    #check:checked ~ .check_box:before{
        width: 0.9375rem;
        display: inline-block;
        height: 0.9375rem;
        content: '';
        background:  url(../assets/images/payment_selected_press@2x.png) no-repeat;
        background-size: cover;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -0.468rem;
        margin-top: -0.55rem;
        /*transform: translate(-50%, -50%);*/
    }
    .borBttom{
        border-top:1px solid #e5e5e5 ;
    }

</style>
